<template>
  <div>

    <div class="i-layout-page-header ivu-m-0">
      <PageHeader :title="$route.meta.title" class="product_tabs" hidden-breadcrumb>
        <div slot="content">
          <Tabs v-model="searchForm.status" @on-click="getList">
            <TabPane name="0" :label="'全部('+count[0]+')'" />
            <TabPane name="2" :label="'公开('+count[2]+')'" />
            <TabPane name="1" :label="'私密('+count[1]+')'" />
            <TabPane name="3" :label="'审核('+count[3]+')'" />
            <TabPane name="4" :label="'驳回('+count[4]+')'" />
            <TabPane name="5" :label="'草稿箱('+count[5]+')'" />
            <TabPane name="6" :label="'回收站('+count[6]+')'" />
          </Tabs>
        </div>
      </PageHeader>
    </div>

    <Card :bordered="false" dis-hover class="ivu-mt">

      <Form ref="searchForm" @submit.native.prevent>
        <Row :gutter="8" type="flex">
          <Col :xl="3" :lg="14" :md="24" :sm="24" :xs="24">
          <Select v-model="searchForm.article_category" clearable placeholder="分类专栏" class="select_space" @on-change="getList">
            <Option v-for="(item, index) in sortCategory.list" :key="index" :value="item.id">{{ item.title }}</Option>
          </Select>
          </Col>
          <Col :xl="3" :lg="14" :md="24" :sm="24" :xs="24">
          <Select v-model="searchForm.website_category" clearable placeholder="网站专栏" class="select_space" @on-change="getList">
            <Option v-for="(item, index) in websiteCategory.list" :key="index" :value="item.id">{{ item.name }}</Option>
          </Select>
          </Col>
          <Col :xl="4" :lg="10" :md="24" :sm="24" :xs="24">
          <DatePicker type="daterange" placement="bottom-end" placeholder="选择发布时间" format="yyyy年MM月dd日" style="width: 100%" @on-change="onChangeDate" />
          </Col>
          <Col :xl="3" :lg="12" :md="24" :sm="24" :xs="24">
          <FormItem label-for="title">
            <Input v-model.trim="searchForm.title" placeholder="输入文章标题搜索" style="width:100%;" @on-enter="getList" />
          </FormItem>
          </Col>
          <Col :lg="5" :md="5" :sm="24">
          <Button icon="ios-search" type="primary" @click="getList">查询</Button>
          <Button icon="ios-sync" style="margin-left:8px" @click="resetSearchForm">重置</Button>
          </Col>
        </Row>
      </Form>

      <Table ref="table" :columns="columns" :data="List" :loading="loading" highlight-row no-user-from-text="暂无数据" no-filtered-user-from-text="暂无筛选结果">
        <template slot="title" slot-scope="{ row }">
          <Row>
            <div style="float:left;width:88px;height:60px; display:table-cell; vertical-align middle; border:1px solid #e8eaec;">
              <img :src="row.cover" style="width:100%; max-height:60px;">
            </div>
            <div style="float:left;padding-left:5px;">
              <a @click="toPreview(row.akey)">{{ row.title.substring(0, 17) }}</a>
              <p style="margin-top:2em;">{{ row.publish_time }}</p>
            </div>
          </Row>
        </template>
        <template slot="status" slot-scope="{ row }">
          <Select v-if="searchForm.status !== '6'" v-model="row.status" style="width:80px; text-align:left;" @on-change="onChangeStatus($event, row.id)">
            <Option :value="1">私密</Option>
            <Option :value="2">公开</Option>
            <Option :value="5">草稿</Option>
          </Select>
        </template>
        <template slot="type" slot-scope="{ row }">
          <Tag v-if="row.editor_type === 'mavoneditor'" color="magenta">md</Tag>
          <Tag v-else color="magenta">富文本</Tag>
        </template>
        <template slot="websiteCategory" slot-scope="{ row }">
          <Tag v-if="websiteCategory.name && row.website_category" color="geekblue">{{ websiteCategory.name[row.website_category] }}</Tag>
        </template>
        <template slot="sortCategory" slot-scope="{ row }">
          <Tag v-if="sortCategory.name && row.article_category" color="cyan">{{ sortCategory.name[row.article_category] }}</Tag>
        </template>
        <template slot="template_type" slot-scope="{ row }">
          {{ row.template_type == 'mz_article_long' ? '宽屏' : '默认' }}
        </template>
        <template slot="writer" slot-scope="{ row }">
          <p>{{ row.operator }}</p>
          <p>{{ row.update_time }} 最后编辑</p>
          <a @click="operationLog(row.id)">操作记录</a>
          <Divider type="vertical" />
          <a @click="operationLog(row.id)">访问日志</a>
        </template>
        <template slot="action" slot-scope="{ row }">
          <template v-if="searchForm.status!=='6'">
            <a @click="onEditCover(row.akey)">编辑封面</a>
            <Divider type="vertical" />
            <a @click="onEditArticle(row.akey)">编辑文章</a>
            <Divider type="vertical" />
            <a @click="onDelete(row.id)">删除</a>
          </template>
          <template v-if="searchForm.status==='6'">
            <a @click="onEditArticle(row.akey)">编辑文章</a>
            <Divider type="vertical" />
            <a @click="onReductionContent(row.id, 5)">还原</a>
            <Divider type="vertical" />
            <a @click="onSoftDelete(row.id)">彻底删除</a>
          </template>
        </template>
      </Table>

      <div class="acea-row row-right page">
        <Page :total="total" :current="searchForm.page" :page-size="searchForm.limit" @on-change="onPageChange" />
      </div>

    </Card>

  </div>
</template>

<script>
import { getList, destroy, deleteSoft, updateStatus, getArticleStatusCount } from '@/api/blogContent/content'
import { getWebsiteCategory, getSortCategory } from '@/api/blogContent/sortCategory'
import Setting from '@/settings'

export default {
  name: 'ContentArticleList',
  data () {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        status: '0',
        website_category: 0,
        article_category: 0,
        start_time: '',
        end_time: '',
        title: ''
      },
      loading: false,
      List: [],
      total: 0,
      columns: [
        // {
        //   title: '序号',
        //   type: 'index',
        //   width: 60
        // },
        {
          title: 'ID',
          key: 'id',
          width: 60
        },
        {
          title: '标题',
          slot: 'title',
          minWidth: 200
        },
        {
          title: '状态',
          slot: 'status',
          minWidth: 60
        },
        {
          title: '浏览',
          key: 'pageviews'
        },
        {
          title: '评论',
          key: 'comments'
        },
        {
          title: '类型',
          slot: 'type'
        },
        {
          title: '网站专栏',
          slot: 'websiteCategory'
        },
        {
          title: '分类专栏',
          slot: 'sortCategory'
        },
        {
          title: '模版',
          slot: 'template_type'
        },
        // mz_article 默认
        // mz_article_long 宽屏
        {
          title: '操作人',
          slot: 'writer',
          width: 200
        },
        {
          title: '操作',
          slot: 'action',
          width: 240
        }
      ],

      // ######################################################################################################################

      // 获取分类状态数量
      count: [0, 0, 0, 0, 0, 0, 0],

      // ######################################################################################################################

      // 网站专栏和分类专栏
      websiteCategory: [],
      sortCategory: []

    }
  },
  computed: {},
  mounted () {
    this.getList()
    this.getArticleStatusCount()
    this.getCategoryInfo() // 获取分类栏目信息
  },
  methods: {
    // ######################################################################################################################
    // # 文章管理 - 文章列表 显示资源列表 操作方法
    // ######################################################################################################################

    // 显示资源列表
    getList () {
      this.loading = true
      getList(this.searchForm).then(async res => {
        if (res.status === 200) {
          this.List = res.data.list
          this.total = res.data.count
        } else {
          this.$Notice.error({ title: res.msg })
        }
        this.loading = false
      }).catch(res => {
        this.loading = false
        this.$Notice.error({ title: res.msg })
      })
    },

    // 删除指定资源
    onDelete (id) {
      this.$Modal.confirm({
        title: '删除提醒',
        content: `确认把此篇文章放入回收站吗？`,
        onOk: () => {
          destroy(id).then((res) => {
            if (res.status === 200) {
              this.$Notice.success({ title: '删除成功' })
              this.getList()
            } else {
              this.$Message.error(res.msg)
            }
          }).catch(res => {
            this.$Message.error(res.msg)
          })
        }
      })
    },
    // 彻底删除
    onSoftDelete (id) {
      this.$Modal.confirm({
        title: '删除提醒',
        content: `确认彻底删除此篇文章吗？`,
        onOk: () => {
          deleteSoft(id).then((res) => {
            if (res.status === 200) {
              this.$Notice.success({ title: '删除成功' })
              this.getList()
            } else {
              this.$Message.error(res.msg)
            }
          }).catch(res => {
            this.$Message.error(res.msg)
          })
        }
      })
    },

    // 编辑封面
    onEditCover (akey) {
      this.$router.push({ path: '/admin/article/cover_edit/' + akey })
    },
    // 编辑文章
    onEditArticle (akey) {
      const routeData = this.$router.resolve({ name: 'content_article_NewMarkdown' })
      window.open(routeData.href + '/' + akey, '_blank')
    },

    // 重置搜索项
    resetSearchForm () {
      this.searchForm = {
        page: 1,
        limit: 10,
        status: '0',
        website_category: 0,
        article_category: 0,
        start_time: '',
        end_time: '',
        title: ''
      }
      this.getList()
    },

    // 修改单篇文章状态
    onReductionContent (id, status) {
      this.$Modal.confirm({
        title: '还原提醒',
        content: `确认还原此篇文章至草稿箱吗？`,
        onOk: () => {
          updateStatus(id, { status: status }).then((res) => {
            if (res.status === 200) {
              this.$Notice.success({ title: '删除成功' })
              this.getList()
              this.getArticleStatusCount()
            } else {
              this.$Message.error(res.msg)
            }
          }).catch(res => {
            this.$Message.error(res.msg)
          })
        }
      })
    },

    // 修改文章状态
    onChangeStatus (e, id) {
      this.loading = true
      updateStatus(id, { status: e }).then((res) => {
        if (res.status === 200) {
          this.$Notice.success({ title: '设置成功' })
          this.getList()
          this.getArticleStatusCount()
        } else {
          this.$Message.error(res.msg)
        }
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    },

    // ######################################################################################################################
    // # 其他 vue 操作方法
    // ######################################################################################################################

    // 选择日期
    onChangeDate (date) {
      this.searchForm.start_time = date[0].replace(/年/g, '-').replace(/月/g, '-').replace(/日/g, '')
      this.searchForm.end_time = date[1].replace(/年/g, '-').replace(/月/g, '-').replace(/日/g, '')
      this.getList()
    },
    // 分页
    onPageChange (index) {
      this.searchForm.page = index
      this.getList()
    },

    // 获取文章状态信息
    getArticleStatusCount () {
      getArticleStatusCount().then((res) => {
        if (res.status === 200) {
          this.count = res.data
        } else {
          this.$Message.error(res.msg)
        }
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    },

    // 获取分类栏目信息
    getCategoryInfo () {
      getWebsiteCategory().then(async res => {
        if (res.status === 200) {
          this.websiteCategory = res.data
        } else {
          this.$Message.error(res.msg)
        }
      }).catch(res => {
        this.$Message.error(res.msg)
      })
      getSortCategory().then(async res => {
        if (res.status === 200) {
          this.sortCategory = res.data
        } else {
          this.$Message.error(res.msg)
        }
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    },

    // ######################################################################################################################
    // #
    // ######################################################################################################################

    // 操作记录
    operationLog () {
      this.$Message.warning('操作记录功能开发中')
    },

    // 浏览文章
    toPreview (akey) {
      window.open(`${Setting.websiteURL}/${akey}`, '_blank')
    }

  }
}
</script>

<style scoped>
</style>
